<template>
  <div class="c2cTrade">
    <Other-Header index="1" bgColor="#5741d9"></Other-Header>
    <div class="mainSection tableSection">
      <div class="inner">
        <h3 class="title">{{$t('l.order_list0')}}</h3>
        <div class="toolbar clearfix">
          <div class="toolbarItem">
            <el-radio-group v-model="queryForm.category" size="medium" @change="updateMyOrder">
              <el-radio-button label="U">{{$t('l.order_list1')}}</el-radio-button>
              <el-radio-button label="S">{{$t('l.order_list2')}}</el-radio-button>
              <el-radio-button label="A">{{$t('l.order_list3')}}</el-radio-button>
            </el-radio-group>
          </div>
          <div class="toolbarItem">
            <span class="label">{{$t('l.order_list4')}}</span>
            <el-select :placeholder="placeholder" v-model="queryForm.type" size="small">
              <el-option
                v-for="item in orderType"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <span class="label">{{$t('l.order_list7')}}</span>
            <el-input
              v-model="queryForm.orderNo"
              :placeholder="placeholder"
              class="search-input"
              size="small"
            ></el-input>
            <span class="label">{{$t('l.personal_146')}}</span>
            <el-date-picker
                v-model="begin"
                type="date"
                :placeholder="$t('l.personal_147')"
                class="left10"
                value-format="yyyy-MM-dd"
                size="small"
                style="width:150px"
                >
            </el-date-picker>
            <el-date-picker
                v-model="end"
                type="date"
                :placeholder="$t('l.personal_148')"
                class="left10"
                value-format="yyyy-MM-dd"
                size="small"
                style="width:150px"
                >
            </el-date-picker>
            <div class="btnGroup">
              <el-button size="small" class="button" @click="updateMyOrder">{{$t('l.order_list24')}}</el-button>
              <el-button size="small" class="button" @click="onReset">{{$t('l.order_list25')}}</el-button>
            </div>
            <download-excel
              class = "button fr"
              style="width:71px;height:34px;text-align:center;line-height:34px;cursor:pointer;border: 1px solid #d8dce5;"
              :data = "json_data"
              name = "我的订单.xls">
              {{$t('l.add_140')}}
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <!-- <el-button type="primary" size="small">导出EXCEL</el-button> -->
          </download-excel>
          </div>
        </div>
        <div class="orderTable">
          <el-table :data="orderList" style="width: 100%">
            <el-table-column
              prop="createTime"
              :label="$t('l.order_list8')"
              align="center"
              width="190"
            ></el-table-column>
            <el-table-column prop="orderNo" :label="$t('l.order_list9')" width="148"></el-table-column>
            <el-table-column :label="$t('l.order_list10')" width="60">
              <template slot-scope="scope">
                <span v-if="scope.row.orderType==1" style="color: #52C41A;">{{$t('l.order_list5')}}</span>
                <span v-else style="color: #EF5756;">{{$t('l.order_list6')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="currencyCode" :label="$t('l.order_list11')"></el-table-column>
            <el-table-column :label="$t('l.order_list12')" width="128">
              <template slot-scope="scope">{{scope.row.totalPrice}}{{scope.row.legalCurrencyCode}}</template>
            </el-table-column>
            <el-table-column prop="price" :label="$t('l.order_list13')"></el-table-column>
            <el-table-column :label="$t('l.order_list14')">
              <template slot-scope="scope">{{scope.row.quantity}}</template>
            </el-table-column>
            <el-table-column :label="$t('l.order_list15')">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">{{$t('l.order_list16')}}</span>
                <span v-else-if="scope.row.status==2">{{$t('l.order_list17')}}</span>
                <span v-else-if="scope.row.status==3">{{$t('l.order_list19')}}</span>
                <span v-else-if="scope.row.status==4">{{$t('l.order_list20')}}</span>
                <span v-else>{{$t('l.order_list18')}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="another" :label="$t('l.order_list21')" width="130"></el-table-column>
            <el-table-column :label="$t('l.order_list22')" align="center">
              <template slot-scope="scope">
                <el-button
                  @click="viewDetail(scope.row.orderNo, scope.row.appeal)"
                  type="text"
                >{{$t('l.order_list23')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="transPages">
          <el-pagination
            v-show="paginationVisible"
            background
            layout="prev, pager, next"
            :page-count="pageCount"
            @current-change="onCurrentChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { api } from "@/api/api";
import OtherHeader from "@/components/otherHeader";
import Footer from "@/components/footer";
import axios from 'axios'
export default {
  components: {
    OtherHeader,
    Footer
  },
  data() {
    return {
      placeholder: this.$t("l.order_list26"),
      paginationVisible: false, // 分页显示
      pageCount: 0, // 总页数
      orderList: [], // 表格数据
      orderType: [
        { label: this.$t("l.order_list5"), value: 1 },
        { label: this.$t("l.order_list6"), value: 2 }
      ],
      queryForm: {
        category: "U",
        orderNo: "",
        pageNum: 1,
        type: ""
      },
      begin:"",
      end:"",
      json_data: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.updateMyOrder();
    },
    // 重置搜索
    onReset() {
      this.queryForm = {
        category: "U",
        orderNo: "",
        pageNum: 1,
        type: ""
      };
      this.begin = "";
      this.end = "";
      this.updateMyOrder();
    },
    // 查看详情
    viewDetail(orderNo, appeal) {
      if (appeal == 1) {
        this.$router.push(`/appealDetail/${orderNo}`);
      } else {
        this.$router.push(`/orderDetail/${orderNo}`);
      }
    },
    onCurrentChange(pageNum) {
      this.queryForm.pageNum = pageNum;
      this.updateMyOrder(null, true);
    },
    // 更新数据
    async updateMyOrder(evt, isPage) {
      let params = {
        category: this.queryForm.category, // 订单类别
        orderNo: this.queryForm.orderNo, // 订单编号
        pageNum: isPage ? this.queryForm.pageNum : 1, // 当前页
        pageSize: 15, // 每页显示记录条数
        type: this.queryForm.type, // 买卖类型
        beginDate:this.begin,
        endDate:this.end
      };
      let res = await api.orderList(params);
      let { code, data, msg } = res.data;

      if (code == 0) {
        let { records: orderList, pages } = data;
        this.orderList = orderList;
        this.pageCount = pages;
        this.paginationVisible = this.pageCount > 1;
        this.exportorder();
      } else {
        this.$layer.msg(msg);
      }
    },
    // 导出
    async exportorder() {
      let params = {
        category: this.queryForm.category, // 订单类别
        orderNo: this.queryForm.orderNo, // 订单编号
        type: this.queryForm.type, // 买卖类型
        beginDate:this.begin,
        endDate:this.end
      };
      let res = await api.export(params);
      let { code, data, msg } = res.data;
      if(code == 0){
        this.json_data = [];
        data.forEach((item,index) => {
          let status = '';
          if(item.status==1){
            status = '待支付'
          }else if(item.status==2){
            status = '待确认'
          }else if(item.status==3){
            status = '已取消'
          }else if(item.status==4){
            status = '申诉中'
          }else{
            status = '已完成'
          }
          this.json_data.push({
            '下单时间':item.createTime,
            '订单编号':"'"+item.orderNo,
            '类型':item.orderType==1?'买':'卖',
            '币种':item.currencyCode,
            '总价':item.totalPrice+item.legalCurrencyCode,
            '单价':item.price,
            '数量':item.quantity,
            '订单状态':status,
            '交易对象':item.another
          })
        });

      }
    }
  }
};
</script>
<style lang="less" scoped>
.c2cTrade {
  background-color: #f7f8fc;
  position: absolute;
  min-height: 100%;
  width: 100%;
  padding-top: 100px;
  
  .mainSection {
    width: 1200px;
    margin: 20px auto 0;
    min-height: 990px;
    padding-bottom: 160px;
    box-sizing: border-box;
  }
  .inner {
    background-color: #fff;
    padding: 40px;
    height: 100%;
    min-height: 830px;
    box-sizing: border-box;
  }
}

.tableSection {
  .title {
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 56, 94, 1);
    line-height: 100%;
    border-left: 3px solid #2D8DFE;
    padding-left: 10px;
    margin-bottom: 28px;
  }
  .toolbar {
    margin-bottom: 16px;
    .label {
      padding-left: 20px;
      padding-right: 6px;
      font-size: 16px;
      color: #33385e;
    }

    .button {
      width: 71px;
      // height: 32px;
      border-radius: 4px;
      // border: 1px solid rgba(221, 224, 235, 1);
      // cursor: pointer;
    }

    .btnGroup {
      display: inline-block;
      margin-left: 20px;
    }

    .el-select {
      width: 100px;
    }

    .search-input {
      width: 174px;
    }

    .el-radio-group {
      margin-left: 20px;
    }

    .toolbarItem {
      &:not(last-child) {
        margin-bottom: 20px;
      }
    }
  }
  .orderTable {
    font-size: 14px;
    color: #33385e;
    /deep/ thead tr {
      background-color: #f2f6fa;
    }
    /deep/ th {
      height: 50px;
      color: rgba(51, 56, 94, 0.6);
    }
  }
}

.transPages {
  margin-top: 40px;
  margin-bottom: 30px;
  width: 100%;
  text-align: center;
}
</style>
<style>
.el-radio-button__inner:hover{
  color:#2D8DFE;
}
</style>

